<template>
    <!--顶级Laytou 容器-->
    <a-layout id="components-layout-demo-side" style="min-height: 100vh">
        <!--
            侧边栏容器
            collapsed 当前收起状态
            collapsible 是否可收起
        -->
        <a-layout-sider v-model="collapsed" :collapsible="true">
            <!--
                :default-selected-keys="['1']"   初始选中的 子菜单项
                mode   菜单模式  inline为内嵌模式
                :selectedKeys="[$route.path]" 根据路由刷新选中
                defaultOpenKeys  初始展开的一级菜单
                :defaultOpenKeys 默认展开的一级菜单数组
            -->
            <a-menu theme="dark" :default-selected-keys="['1']" mode="inline" :selectedKeys="[$route.path]" :defaultOpenKeys="openKeys">
                <!--一级菜单-->
                <a-sub-menu  v-for="(value,key) in data" :key="'#_' + value.id">
                    <span slot="title">
                        <!--<a-icon type="setting" theme="filled" />-->
                        <!--属性绑定，文本插值-->
                        <span :id="'sub-menu-title-' + key ">{{value.title}}</span>
                    </span>
                    <!--二级菜单 路由嵌套跳转-->
                    <a-menu-item :key="child_value.router" v-for="(child_value,chlid_key) in value.child_node" @click="changeMenu(child_value.router, value.title,child_value.title)">
                        {{child_value.title}}
                    </a-menu-item>
                </a-sub-menu>
            </a-menu>
        </a-layout-sider>
        <!--右边主要内容-->
        <a-layout>
            <!--右边头部-->
            <a-layout-header style="background: #fff; padding: 0" >
                <!--收缩/展开-->
                <div @click="function() {
                  collapsed = !collapsed;
                }" id="fold_or_unfold">
                    <div v-if="collapsed">
                        <a-icon type="right-square" :style="{ fontSize: '20px', color: '#08c' }" />
                    </div>
                    <div v-else>
                        <a-icon type="left-square" :style="{ fontSize: '20px', color: '#08c' }"/>
                    </div>
                </div>
                <!--logo-->
                <div class="logo">
                    <!--头像悬浮-->
                    <!--左上显示-->
                    <a-popover placement="leftTop">
                        <template slot="content">
                            <a-tag color="red" @click="this.clickLoginout">
                                退出登录
                            </a-tag>
                        </template>
                        <img src="../assets/avatar.jpg" class="circleImg">
                    </a-popover>
                </div>

            </a-layout-header>
            <!--右边内容-->
            <a-layout-content style="margin: 0 16px">
                <!--内容头部title-->
                <a-breadcrumb style="margin: 16px 0">
                    <a-breadcrumb-item>{{sub_menu_title}}</a-breadcrumb-item>
                    <a-breadcrumb-item>{{menu_title}}</a-breadcrumb-item>
                </a-breadcrumb>
                <div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }">
                    <!--定义子路由出口-->
                    <router-view/>
                </div>
            </a-layout-content>
            <!--右边页脚-->
            <a-layout-footer style="text-align: center">
                ThinkPHP5.1_vue2.x_Base-admin ©2020 Created by makalo
            </a-layout-footer>
        </a-layout>
    </a-layout>
</template>
<script>
    export default {
        data() {
            return {
                collapsed: false,
                sub_menu_title: '系统管理',
                menu_title: '管理员',
                data : [],

                openKeys: [''],
            };
        },
        //页面渲染之前,$el创建之后 去加载
        mounted(){
            this.getMenus();
            this.setOpenKeys();
        },
        methods: {
            //路由内容切换
            changeMenu(route,sub_menu_title, menu_title){
                //避免重复切换
                if(this.$route.path !== route){
                    /*console.log(this.$route, '当前路由.......')
                    console.log(this.$router, '全局路由.......')*/
                    //获取路由对象并切换
                    this.$router.push(route);
                    //获取菜单并设置，内容头部title
                    this.sub_menu_title = sub_menu_title;
                    this.menu_title = menu_title;
                }
            },

            //处理初始一级菜单选中
            setOpenKeys(){
                this.axios.get(process.env.VUE_APP_API_URL + this.urls.getNodeByRouter, {params: {router: this.$route.path}}).then((data) => {
                    this.openKeys.push('#_'+data.data.data.pid);
                });
            },

            //获取侧边栏菜单树
            getMenus(){
                //console.log(process.env.VUE_APP_API_URL, this.urls.getMenus, 'layout ....')
                this.axios.get(process.env.VUE_APP_API_URL + this.urls.getMenus).then((data)=>{
                    //console.log(data.data.data);
                    this.data = data.data.data;
                });
            },
            //退出登录
            clickLoginout(checked){
                //console.log(checked, '退出登录........');
                //移除localStorage
                localStorage.removeItem('base_admin_token');
                //登录成功则跳转
                this.$router.push('/login');
            }
        }
    };
</script>

<style>

    /*隐藏原本的图标*/
    .ant-layout-sider-trigger{
        display: none;
    }
    /*收缩展开*/
    #fold_or_unfold{
        float: left;
        margin-left: 20px;
    }

    /*logo 样式*/
    #components-layout-demo-side .logo {
        position: absolute;
        right: 20px;
    }
    /*logo img圆角*/
    .circleImg{
        border-radius: 30px;
        width:50px;
        height:50px;
    }
</style>
